<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-3.2.1.js" charset="UTF-8"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度地图</title>
<script type="text/javascript"
	src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=jQTWjlK7wdGK7ZFA8N47UdBGcGtWpZpd"></script>
<style>
html, body {
	width: 100%;
	height: 98%;
	padding: 0;
	margin: 0;
}

#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#r-result,#r-result table{
            width:100%;
        }
</style>
</head>

<body>
	<div id="div1">
		<input type="text" id="input11" value="" style="display: none" /> <input
			type="text" id="input22" value="" style="display: none" /> 我的位置:<input
			type="text" id="input1" value="" /> 终点: <input type="text"
			id="input2" value="" /> <input type="button" id="but1" value="驾驶"
			onclick="aa()" /> <input type="button" id="but1" value="步行"
			onclick="walk()" />请输入:<input type="text" id="input3" value="" /> <input
			type="button" id="but2" value="搜索" onclick="bb()" />
		<div>
			驾驶时间:<input type="text" id="input4" value="" />总路程:<input
				type="text" id="input5" value="" /> <input type="button" id="but3"
				value="数据重置" onclick="deleteall()" />
		</div>
	</div>
	<div id='allmap'></div>


	<div id="r-result"></div>
	<script>
		var map = new BMapGL.Map("allmap");
		map.centerAndZoom(new BMapGL.Point(118.182758, 24.494937), 20); // 初始化地图,设置中心点坐标和地图级别
		map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放	
		var cityControl = new BMapGL.CityListControl({
			// 控件的停靠位置（可选，默认左上角）
			anchor : BMAP_ANCHOR_TOP_LEFT,
			// 控件基于停靠位置的偏移量（可选）
			offset : new BMapGL.Size(10, 5)
		});
		// 将控件添加到地图上
		map.addControl(cityControl);
		map.addEventListener('click', function(e) {//鼠标点击获取经纬度	
			var transit ;
			var str = '';
			var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
			var gc = new BMapGL.Geocoder();//经纬度转换城地名
			gc.getLocation(point, function(rs) {
				var addComp = rs.addressComponents;
				str = addComp.province + addComp.city + addComp.district
						+ addComp.street + addComp.streetNumber;
				if ($('#input1').val() == "") {
					$('#input1').val(str);
					$('#input11').val(e.latlng.lng + ',' + e.latlng.lat);
				} else {
					$('#input2').val(str);
					$('#input22').val(e.latlng.lng + ',' + e.latlng.lat);
				}
			});
		});
	
		

		function deleteall() {//重置数据
			map.clearOverlays();
			$('#input1').val("");
			$('#input2').val("");
			$('#input11').val("");
			$('#input22').val("");
			$('#input3').val("");
			$('#input4').val("");
			$('#input5').val("");
		}
		function walk(){//步行
			map.clearOverlays();
			$('#input4').val("");
			$('#input5').val("");
			var wz1 = $('#input11').val();
			var wz2 = $('#input22').val();
			var wz11 = $('#input1').val();
			var wz22 = $('#input2').val();
		
				var walking = new BMapGL.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
				walking.search(wz11, wz22);
			
			
		}
		function aa() {//查询驾驶路线
			map.clearOverlays();
			$('#input4').val("");
			$('#input5').val("");
			var wz1 = $('#input11').val();
			var wz2 = $('#input22').val();
			var wz11 = $('#input1').val();
			var wz22 = $('#input2').val();
			var time;
			var lc;
			if (wz1 != '' && wz2 != '') {
				var output = "从" + wz11 + "到" + wz22 + "驾车需要";
				var searchComplete = function(results) {
					if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
						return;
					}
					var plan = results.getPlan(0);
					time = plan.getDuration(true);
					lc = plan.getDistance(true);
					output += time + "\n"; //获取时间
					output += "总路程为：";
					output += lc + "\n"; //获取距离
				}
				transit = new BMapGL.DrivingRoute(map, {
					renderOptions : {
						map : map
					},
					onSearchComplete : searchComplete,
					onPolylinesSet : function() {
						setTimeout(function() {
							$('#input4').val(time);
							$('#input5').val(lc);
							alert(output);
						}, "1000");
					}
				});
				var aa1 = wz1.split(',');
				var bb1 = wz2.split(',');
				var start = new BMapGL.Point(aa1[0], aa1[1]);//驾驶路线
				var end = new BMapGL.Point(bb1[0], bb1[1]);
				transit.search(start, end);
			}
		}

		function bb() {//搜索
			var a1 = $('#input3').val();
			if (a1 != '') {
				var local = new BMapGL.LocalSearch(map, {
					renderOptions : {
						map : map
					}
				});
				local.search(a1);
			}
		}
	</script>
</body>

</html>